<template>
    <div>
        <div style="text-align: center; user-select: none;">
            <img src="@/assets/dsb_icon.png" alt="" />
        </div>
        <div class="rank-area">
            <div class="rank-item" v-for="(item, index) in rankData" :key="item.name">
                <img :src="item.avatar" alt="" />
                <img :src="getImagePath(index)" class="rank-sort-img" />
                <div>
                    <span style="font-size: 20px; font-weight: bold;">{{ item.name }}</span>
                    <div style="margin-top: 4px;"></div>
                    <span style="font-size: 12px;">卡号：{{ item.idNumber }}</span>
                </div>
                <div>
                    <span style="font-size: 14px;">累计打赏次数</span>
                    <p>
                        <n-number-animation :from="item.previousCount || 0" :to="item.rewardsCount" :duration="3000"
                            :precision="0" />
                        <span style="font-size: 14px; margin-left: 4px;">次</span>
                    </p>
                </div>
            </div>
        </div>
        <div style="text-align: center; user-select: none;" class="more-icon" @click="showModal">
            <img src="@/assets/more2.png" alt="" class="heartbeat-animation" />
        </div>
    </div>

    <!-- 员工打赏模态框 -->
    <n-modal v-model:show="isModalVisible" :show-mask="false" :closable="false" :auto-focus="false"
        class="custom-modal">
        <div class="modal-container">
            <!-- 标题栏 -->
            <div class="modal-header">
                <!-- 左侧标题 -->
                <div class="modal-title">{{ envStore.placeInfo?.placeName }}- 员工打赏</div>

                <!-- 右侧按钮组 -->
                <div class="header-buttons">
                    <n-button color="#540F18" size="small" round @click="isRulesVisible = true">
                        打赏规则
                    </n-button>
                    <n-button color="#540F18" size="small" round @click="isHistoryVisible = true">
                        打赏记录
                    </n-button>
                    <!-- 关闭按钮 -->
                    <div class="close-btn" @click="closeModal"></div>
                </div>
            </div>

            <!-- 模态框内容区域 -->
            <div class="modal-content"
                :class="{ 'rewards-bg': activeTab === 'rewards', 'ranking-bg': activeTab === 'ranking' }">
                <!-- 标签页导航 -->
                <div class="tab-navigation">
                    <div class="tab-item" :class="{ active: activeTab === 'rewards' }" @click="switchTab('rewards')">
                        员工打赏
                    </div>
                    <div v-if="showRankingTab" class="tab-item" :class="{ active: activeTab === 'ranking' }"
                        @click="switchTab('ranking')">
                        打赏榜
                    </div>
                </div>

                <!-- 标签页内容区域 -->
                <div class="tab-content">
                    <div v-if="activeTab === 'rewards'">
                        <template v-if="!showGiftList">
                            <!-- 员工打赏内容 -->
                            <div class="three-user" :class="{ 'three-user--visible': isThreeUserVisible }">
                                <div v-for="(emp, idx) in displayTopThree" :key="emp.id ?? idx" 
                                     :class="{ 'placeholder-item': emp.isPlaceholder }">
                                    <img :src="emp.avatar" alt="" :class="{ 'placeholder-avatar': emp.isPlaceholder }" />
                                    <div>
                                        {{ idx === 0 ? '2nd' : (idx === 1 ? '1st' : '3rd') }}
                                        <div :class="{ 'placeholder-text': emp.isPlaceholder }">{{ emp.name }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="employee-list" ref="employeeListRef">
                                <div class="employee-item" v-for="emp in employees" :key="emp.name">
                                    <img :src="emp.avatar" alt="" />
                                    <div>
                                        <span style="font-size: 15px; font-weight: bold;">{{ emp.name }}</span>
                                    </div>
                                    <div class="ds-button" @click="openGift(emp)">打赏</div>
                                </div>
                            </div>
                            <div class="scroll-btn left" v-show="!showGiftList && showLeftButton"
                                @mousedown="startHold('left')" @mouseup="stopHold" @mouseleave="stopHold"
                                @click="scrollOnce('left')">
                                <n-icon size="18">
                                    <IconCarbonChevronLeft />
                                </n-icon>
                            </div>
                            <div class="scroll-btn right" v-show="!showGiftList && showRightButton"
                                @mousedown="startHold('right')" @mouseup="stopHold" @mouseleave="stopHold"
                                @click="scrollOnce('right')">
                                <n-icon size="18">
                                    <IconCarbonChevronRight />
                                </n-icon>
                            </div>
                        </template>
                        <template v-else>
                            <!-- 展示礼物列表：与员工 item 大小和 hover 效果一致 -->
                            <GiveGift :items="giftItems" :employee="selectedEmployee" @back="showGiftList = false" />
                        </template>
                    </div>
                    <div v-if="activeTab === 'ranking'">
                        <div class="ranking-list">
                            <div class="rank-item" v-for="(item, index) in rankAll" :key="item.idNumber + '-' + index"
                                :style="{ backgroundImage: `url(${getRankBgByIndex(index)})` }">
                                <span class="rank-index">{{ getRankTextByIndex(index) }}</span>
                                <img :src="item.avatar" alt="" />
                                <img v-if="index < 3" :src="getImagePath(index)" class="rank-sort-img" />
                                <div>
                                    <span style="font-size: 20px; font-weight: bold;">{{ item.name }}</span>
                                    <div style="margin-top: 4px;"></div>
                                    <span style="font-size: 12px;">卡号：{{ item.idNumber }}</span>
                                </div>
                                <div>
                                    <span style="font-size: 14px;">累计打赏次数</span>
                                    <p>
                                        <n-number-animation :from="item.previousCount || 0" :to="item.rewardsCount"
                                            :duration="3000" :precision="0" />
                                        <span style="font-size: 14px; margin-left: 4px;">次</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </n-modal>
    <GiftRules :show="isRulesVisible" @update:show="(v) => isRulesVisible = v" />
    <GiftHistory :show="isHistoryVisible" @update:show="(v) => isHistoryVisible = v" />
</template>

<script setup lang="ts">
import { useEnvStore } from '@/store'
import { get } from '@/utils/common/request'
import GiveGift from '@/views/components/GiveGift.vue'
import GiftRules from '@/views/components/GiftRules.vue'
import GiftHistory from '@/views/components/GiftHistory.vue'
import { nextTick } from 'vue'
const envStore = useEnvStore()

// 接收 settings，并依据 isShowAccountRewardingRanking 计算显隐
const props = defineProps<{ settings?: { isShowAccountRewardingRanking?: boolean } }>()
const showRankingTab = computed(() => !!props.settings?.isShowAccountRewardingRanking)
// 控制模态框显示/隐藏
const isModalVisible = ref(false)
const isRulesVisible = ref(false)
const isHistoryVisible = ref(false)
// 标签页状态管理
const activeTab = ref<'rewards' | 'ranking'>('rewards')
const showGiftList = ref(false)
const selectedEmployee = ref<{ name: string; avatar: string } | null>(null)
const topThreeEmployees = ref<{ name: string; avatar: string; id?: any }[]>([])
const isThreeUserVisible = ref(false)
const displayTopThree = computed(() => {
    const arr = topThreeEmployees.value.slice(0, 3)
    
    // 创建占位符对象
    const createPlaceholder = (index: number) => ({
        name: '虚位待发',
        avatar: new URL('@/assets/mrtx.png', import.meta.url).href,
        id: `placeholder-${index}`,
        isPlaceholder: true
    })
    
    // 确保始终有3个位置
    const fullArr = [...arr]
    while (fullArr.length < 3) {
        fullArr.push(createPlaceholder(fullArr.length))
    }
    
    if (fullArr.length === 3) {
        const [first, second, third] = fullArr
        // 布局要求：中间第一，左第二，右第三
        return [second, first, third]
    }
    
    return fullArr
})
// 使用后端返回的礼物 JSON 数据并映射到前端展示结构
const giftImageUrls = [
    new URL('@/assets/sp1.png', import.meta.url).href,
    new URL('@/assets/sp2.png', import.meta.url).href,
    new URL('@/assets/sp3.png', import.meta.url).href,
    new URL('@/assets/sp4.png', import.meta.url).href,
    new URL('@/assets/sp5.png', import.meta.url).href,
    new URL('@/assets/sp6.png', import.meta.url).href,
    new URL('@/assets/sp7.png', import.meta.url).href,
    new URL('@/assets/sp8.png', import.meta.url).href,
]
const giftItems = ref<{ name: string; price: number; imageUrl?: string }[]>([])
function loadGifts() {
    const url = `/marketing-server/client/giftRewarding/findByPlaceId`
    get(url).then(res => {
        const list = Array.isArray(res) ? res : (res?.data?.list ?? res?.data ?? [])
        giftItems.value = list.map((g: any, i: number) => ({
            name: g.giftName || g.name || '',
            price: Number(g.giftMoney ?? g.price ?? 0) / 100,
            imageUrl: giftImageUrls[i % giftImageUrls.length],
            id: g.giftId || g.id || '',
        }))
    })
}
// 显示模态框的函数
const showModal = async () => {
    // 打开时还原标签页与内容状态
    activeTab.value = 'rewards'
    showGiftList.value = false
    selectedEmployee.value = null
    giftItems.value = []
    showLeftButton.value = false
    showRightButton.value = false
    isModalVisible.value = true
    isThreeUserVisible.value = false
    stopHold()
    // 加载Top3账户
    loadTopAccounts()
    const url = '/marketing-server/client/giftRewarding/findAllAccounts'
    const res: any = await get(url)
    const list = Array.isArray(res?.data)
        ? res.data
        : (res?.data?.list ?? res ?? [])
    employees.value = list.map((item: any) => {
        const name = item?.accountName || item?.loginName || item?.nickName || '—'
        const rawAvatar = typeof item?.avatar === 'string'
            ? item.avatar
            : (typeof item?.headImg === 'string' ? item.headImg : '')
        const cleaned = rawAvatar.replace(/`/g, '').trim()
        const avatar = /^https?:\/\//.test(cleaned)
            ? cleaned
            : new URL('@/assets/mrtx.png', import.meta.url).href
        const id = item?.accountId ?? item?.id ?? undefined
        return { name, avatar, id }
    })
  await nextTick()
  const el = employeeListRef.value
  if (el) {
    // 回到起始位置
    el.scrollTo({ left: 0 })
    // 立即根据真实内容宽度与可视宽度判断是否可滚动，保证首次打开就能显示按钮
    // 使用 rAF 让布局完成后再读取，避免同步读取造成的误判
    requestAnimationFrame(() => {
      const threshold = el.scrollWidth > el.clientWidth
      showLeftButton.value = false
      showRightButton.value = !showGiftList.value && threshold
    })
  }
}

// 统一关闭函数：重置状态，清理定时与滚动
function closeModal() {
    isModalVisible.value = false
    activeTab.value = 'rewards'
    showGiftList.value = false
    selectedEmployee.value = null
    giftItems.value = []
    stopHold()
}

// 标签页切换函数
const switchTab = (tab: 'rewards' | 'ranking') => {
    activeTab.value = tab
}
// 动态获取图片路径的函数
const getImagePath = (index: number) => {
    // 预定义图片路径映射
    const imagePaths = [
        new URL('@/assets/i1.png', import.meta.url).href,
        new URL('@/assets/i2.png', import.meta.url).href,
        new URL('@/assets/i3.png', import.meta.url).href,
    ]
    return imagePaths[index] || imagePaths[0]
}

// 员工打赏静态数据（用于本地展示）
const employees = ref<{ name: string; avatar: string }[]>([])
const employeeListRef = ref<HTMLDivElement | null>(null)
const showLeftButton = ref(false)
const showRightButton = ref(false)
let holdTimer: ReturnType<typeof setInterval> | null = null
let holdDirection: 'left' | 'right' | null = null

// 使用 @vueuse/core 的 useScroll 监听横向滚动位置，并结合 arrivedState 控制右按钮
const { x, arrivedState } = useScroll(employeeListRef)
// 使用 useElementSize 监听容器尺寸变化，驱动右按钮显示逻辑（threshold）
const { width } = useElementSize(employeeListRef)

// 统一用 watchEffect：依赖 x、arrivedState.right、width、employeeListRef
watchEffect(() => {
    const el = employeeListRef.value
    if (!el) return
    // 使用实际可视宽度比较，避免首次进入未正确显示右按钮
    const threshold = el.scrollWidth > el.clientWidth
    const atRight = arrivedState.right
    // 左按钮：有滚动位移时显示
    showLeftButton.value = !showGiftList.value && x.value > 0
    // 右按钮：满足阈值且未到达最右端时显示
    showRightButton.value = !showGiftList.value && threshold && !atRight
})

function openGift(emp: { name: string; avatar: string }) {
    selectedEmployee.value = emp
    // 进入礼物视图前，加载礼物列表
    loadGifts()
    showGiftList.value = true
}
// 移除 updateScrollButtons 函数与相关调用，完全用 watch 驱动
function scrollByAmount(amount: number) {
    const el = employeeListRef.value
    if (!el) return
    el.scrollBy({ left: amount, behavior: 'smooth' })
}

function scrollOnce(direction: 'left' | 'right') {
    const el = employeeListRef.value
    if (!el) return
    const step = Math.floor(el.clientWidth * 0.6)
    scrollByAmount(direction === 'left' ? -step : step)
}

function startHold(direction: 'left' | 'right') {
    holdDirection = direction
    if (holdTimer) clearInterval(holdTimer)
    holdTimer = setInterval(() => {
        scrollByAmount(direction === 'left' ? -20 : 20)
        // 不再调用 updateScrollButtons，左按钮由 watch(x) 自动更新
    }, 16)
}

function stopHold() {
    if (holdTimer) {
        clearInterval(holdTimer)
        holdTimer = null
    }
    holdDirection = null
}

// 移除 @scroll 事件，保留初次渲染后的一次计算
onMounted(async () => {
      const el = employeeListRef.value
    await nextTick()
   setTimeout(() => {
   
    if (el) {
        // 初次计算一次右按钮
        // 使用实际可视宽度进行比较，避免首次进入判断不准确
        showRightButton.value = !showGiftList.value && (el.scrollWidth > el.clientWidth)
    }
   }, 500);
})

onUnmounted(() => {
    stopHold()
})

// 页面加载
const rankData = ref<any[]>([])
const rankAll = ref<any[]>([])
// 背景图片：前三名使用 phbbj1/2/3，其余使用 phbbj4
const rankBgImages = [
    new URL('@/assets/phbbj1.png', import.meta.url).href,
    new URL('@/assets/phbbj2.png', import.meta.url).href,
    new URL('@/assets/phbbj3.png', import.meta.url).href,
    new URL('@/assets/phbbj4.png', import.meta.url).href
]
function getRankBgByIndex(index: number) {
    return rankBgImages[index] ?? rankBgImages[3]
}

function getRankTextByIndex(index: number) {
    return index === 0 ? '1st' : index === 1 ? '2nd' : index === 2 ? '3rd' : `${index + 1}th`
}

function maskId(id: string) {
    if (!id) return ''
    const head = id.slice(0, 3)
    const tail = id.slice(-4)
    return `${head}*********${tail}`
}

function getGenderAvatarByIdNumber(id: string) {
    const male = new URL('@/assets/person_male.png', import.meta.url).href
    const female = new URL('@/assets/person_female.png', import.meta.url).href
    const neutral = new URL('@/assets/ava.png', import.meta.url).href
    if (!id || typeof id !== 'string' || id.length < 17) return neutral
    const code = Number(id.charAt(16))
    if (Number.isNaN(code)) return neutral
    return code % 2 === 0 ? female : male
}

// 定时器引用
let rankTimer: ReturnType<typeof setInterval> | null = null

// 模拟查询rank数据的函数

const fetchRankData = async () => {
    let apiList: any[] | null = null
    try {
        const res: any = await get('/marketing-server/client/giftRewarding/findGiftRewardingOrderByCount')
        apiList = res?.data?.list ?? null
    } catch (e) {
        apiList = null
    }

    if (apiList && Array.isArray(apiList) && apiList.length) {
        const sorted = [...apiList].sort((a, b) => Number(a.rewardRanking) - Number(b.rewardRanking))
        const mappedTop3 = sorted.slice(0, 3).map((item: any, idx: number) => ({
            name: item.idName,
            avatar: getGenderAvatarByIdNumber(item.idNumber),
            rewardsCount: Number(item.commissionCount) || 0,
            previousCount: rankData.value[idx]?.rewardsCount || 0,
            idNumber: maskId(item.idNumber)
        }))
        rankData.value = mappedTop3
        // 全量列表：宽度占满，背景随名次切换，布局一致
        rankAll.value = sorted.map((item: any, idx: number) => ({
            name: item.idName,
            avatar: getGenderAvatarByIdNumber(item.idNumber),
            rewardsCount: Number(item.commissionCount) || 0,
            previousCount: rankAll.value[idx]?.rewardsCount || 0,
            idNumber: maskId(item.idNumber)
        }))
    } else {
        rankData.value = []
        rankAll.value = []
    }
}

// 启动定时查询
const startRankPolling = () => {
    // 立即执行一次查询
    fetchRankData()

    // 设置定时器，每10秒查询一次
    rankTimer = setInterval(() => {
        fetchRankData()
    }, 10000)
}

// 停止定时查询
const stopRankPolling = () => {
    if (rankTimer) {
        clearInterval(rankTimer)
        rankTimer = null
    }
}

onMounted(() => {
    // 页面加载时启动定时查询
    startRankPolling()
})

// 页面卸载时清理定时器
onUnmounted(() => {
    stopRankPolling()
})
function loadTopAccounts() {
    const url = '/marketing-server/client/giftRewarding/findAccountOrderByCount'
    get(url).then(res => {
        const list = Array.isArray(res?.data)
            ? res.data
            : (res?.data?.list ?? res ?? [])
        const mapped = list.map((item: any) => {
            const name = item?.accountName || item?.loginName || item?.nickName || '—'
            const rawAvatar = typeof item?.avatar === 'string'
                ? item.avatar
                : (typeof item?.headImg === 'string' ? item.headImg : '')
            const cleaned = rawAvatar.replace(/`/g, '').trim()
            const avatar = /^https?:\/\//.test(cleaned)
                ? cleaned
                : new URL('@/assets/mrtx.png', import.meta.url).href
            const id = item?.accountId ?? item?.id ?? undefined
            return { name, avatar, id }
        })
        topThreeEmployees.value = mapped.slice(0, 3)
        nextTick(() => requestAnimationFrame(() => { isThreeUserVisible.value = true }))
    })
}
</script>

<style scoped lang="scss">
.rank-area {
    margin: 15px 0;
}

.rank-item {
    display: flex;
    align-items: center;
    color: #FFFFFF;
    width: 420px;
    height: 83px;
    background-image: url('@/assets/dst_image.png');
    padding-right: 52px;
    position: relative;

    &+.rank-item {
        margin-top: 10px;
    }

    >img:not(.rank-sort-img) {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        position: relative;
        left: 5px;
        top: -1px;

    }

    >div:first-of-type {
        margin-left: 20px;

        span {
            display: block;
        }
    }

    >div:last-of-type {
        margin-left: auto;

        p {
            font-size: 22px;
            font-weight: bold;
        }
    }
}


.more-icon {
    cursor: pointer;
    transition: all 0.3s ease;

    img {
        transition: all 0.3s ease;
    }
}

.rank-sort-img {
    position: absolute;
    bottom: -2px;
    left: -14px;
}

/* 心跳抖动动画 */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.1);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1);
    }
}

.heartbeat-animation {
    animation: heartbeat 1.2s ease-in-out infinite;
}

/* 自定义模态框样式 */
.custom-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-container {
    position: relative;
    width: 800px;
    padding: 58px 0 20px 0;
    background: url('@/assets/dbj.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 27px;
    overflow: hidden;
    position: relative;
}

/* 标题栏样式 */
.modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 10;
}

/* 标题样式 */
.modal-title {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 右侧按钮组 */
.header-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.close-btn {
    width: 32px;
    height: 32px;
    background: url('@/assets/gb2.png') no-repeat center;
    background-size: cover;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-btn:hover {
    transform: scale(1.1) rotate(180deg);
}

.modal-content {
    width: calc(100% - 29px);
    height: 600px;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
    position: relative;
    // top: 20px;
}

.modal-content.rewards-bg {
    background-image: url('@/assets/qh1.png');
}

.modal-content.ranking-bg {
    background-image: url('@/assets/qh2.png');
}

/* 标签页导航样式 */
.tab-navigation {
    display: flex;
    margin-bottom: 30px;
    padding: 4px;
    position: absolute;
    width: 100%;
    z-index: 999;
}

.tab-item {
    flex-basis: 50%;
    padding: 12px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    position: relative;
    overflow: hidden;
    font-weight: bold !important;

}

.tab-item.active {
    transform: translateY(-1px);
    color: #913E00;
}

.three-user {
    background-image: url('@/assets/mcph.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 268px;
    width: 509px;
    margin: 30px auto;
    display: flex;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;

    &.three-user--visible {
        opacity: 1;
        transform: translateY(0);
    }

    >div {
        flex: 1;

        img {
            width: 82px;
            height: 82px;
            border-radius: 50%
        }

        >div {

            color: #000000;
            font-weight: bold;
            font-size: 32px;
            position: relative;
            font-style: italic;

            >div {
                font-size: 16px;
                font-weight: normal;
                font-style: normal;
            }
        }

        &:first-child {
            transform: translate(45px, 54px);
        }

        &:nth-child(2) {
            transform: translate(45px, 9px);
        }

        &:last-child {
            transform: translate(45px, 53px);
        }

        // 占位符样式
        &.placeholder-item {
            opacity: 0.6;
            
            .placeholder-avatar {
                opacity: 0.5;
                filter: grayscale(50%);
            }
            
            .placeholder-text {
                color: #666666 !important;
                font-style: italic;
                font-size: 14px !important;
            }
        }
    }
}

/* 标签页内容区域 */
.tab-content {
    height: 100%;
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
    padding-top: 50px;

    >div {
        width: 100%;
        height: 100%;
        overflow: auto;

    }
}

.employee-list {
    display: flex;
    padding: 0 20px;
    margin-top: 20px;
    gap: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    max-width: 750px;
}

.employee-list::-webkit-scrollbar {
    /* Chrome/Safari */
    display: none;
}

/* 移除伪元素按钮，改用 DOM 元素 */
.scroll-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.27);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
    z-index: 5;
    cursor: pointer;
    user-select: none;
}

.scroll-btn.left {
    left: 5px;
    bottom: 120px;
}

.scroll-btn.right {
    right: 5px;
    bottom: 120px;
}

.employee-item {
    width: 160px;
    height: 200px;
    border: 2px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    background: #FAFAFA;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000000;
    font-weight: bold;
    padding-top: 20px;

    img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 10px;
    }

    .ds-button {
        background-image: url('@/assets/ds_button1.png');
        background-size: 100% 100%;
        width: 144px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        border-radius: 15px;
        margin-top: 20px;
        animation: heartbeat 1.2s ease-in-out infinite;
    }
}

.employee-item:hover {
    border-color: #e16db4;
    background: linear-gradient(to bottom, #FFD4D3 0%, #FFFFFF 20%, #FFFFFF 100%);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.placeholder-content {
    font-size: 18px;
    text-align: center;
    margin-top: 50px;
}

.ranking-list {
    width: 100%;
    padding: 15px 20px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent; /* Firefox */

    >.rank-item {
        width: 100%;
        color: #000000 !important;
        background-size: 100% 100%;
    }

    .rank-index {
        font-weight: 600;
        font-size: 32px;
        font-style: italic;
        margin: 0 20px;
        width: 60px;
    }

    .rank-sort-img {
        position: absolute;
        bottom: -2px;
        left: 86px;
    }
}
/* WebKit-based browsers */
.ranking-list::-webkit-scrollbar {
    width: 6px;
}
.ranking-list::-webkit-scrollbar-track {
    background: transparent;
}
.ranking-list::-webkit-scrollbar-thumb {
    background: #FF4C66;
    border-radius: 6px;
    border: 1px solid #FF4C66;
}
.ranking-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25));
}
</style>